<template>
  <div class="drop-Gsr">
    <van-field
      readonly
      clickable
      name="picker"
      :value="value"
      label=""
      placeholder="请选择"
      @click="showPicker = true"
      right-icon="arrow-down"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="userOptions"
        value-key="nickname"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>
<script>
import { listSimpleUsers } from "@/api/system/user";
export default {
  name: "DropGsr",
  props: ["value"],
  data() {
    return {
      value: "",
      userOptions: [],
      showPicker: false,
    };
  },
  async created() {
    this.getSimpleUsers();
  },
  methods: {
    onConfirm(value) {
      this.value = value.nickname;
      this.showPicker = false;
      this.$emit('drop-Sec',value)
    },
    async getSimpleUsers() {
      const res = await listSimpleUsers();
      this.userOptions = res.data || [];
    },
  },
};
</script>
<style lang="scss" scoped>
.drop-Gsr {
  width: 324px;
  overflow: hidden;
  ::v-deep .van-field__control {
    width: 100%;
    height: 44px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #efefef;
    font-size: 14px;
    padding: 0 6px;
    // overflow: hidden;
  }
  ::v-deep .van-cell {
    padding: 0;
    width: 100%;
  }
  ::v-deep .van-field__right-icon {
    position: absolute;
    right: 8px;
  }
}
</style>
